home *** CD-ROM | disk | FTP | other *** search
/ PC go! 2017 October / PCgo 10-2017 CD-ROM Germany.iso / nw.pak / Unnamed File 000169.txt < prev    next >
Encoding:
Text File  |  2015-07-29  |  6.3 KB  |  227 lines
  1.  
  2. (function() {
  3.  
  4.   var webkitStyles = '-webkit-transition' in document.documentElement.style
  5.   var TRANSITION_CSSNAME = webkitStyles ? '-webkit-transition' : 'transition';
  6.   var TRANSFORM_CSSNAME = webkitStyles ? '-webkit-transform' : 'transform';
  7.   var TRANSITION_NAME = webkitStyles ? 'webkitTransition' : 'transition';
  8.   var TRANSFORM_NAME = webkitStyles ? 'webkitTransform' : 'transform';
  9.  
  10.   var hasShadowDOMPolyfill = window.ShadowDOMPolyfill;
  11.  
  12.   Polymer('hero-transition',{
  13.  
  14.     go: function(scope, options) {
  15.       var props = [
  16.         'border-radius',
  17.         'width',
  18.         'height',
  19.         TRANSFORM_CSSNAME
  20.       ];
  21.  
  22.       var duration = options && options.duration || 
  23.           (CoreStyle.g.transitions.heroDuration || 
  24.           CoreStyle.g.transitions.duration);
  25.  
  26.       scope._heroes.forEach(function(h) {
  27.         var d = h.h0.hasAttribute('hero-delayed') ? CoreStyle.g.transitions.heroDelay : '';
  28.         var wt = [];
  29.         props.forEach(function(p) {
  30.           wt.push(p + ' ' + duration + ' ' + options.easing + ' ' + d);
  31.         });
  32.  
  33.         h.h1.style[TRANSITION_NAME] = wt.join(', ');
  34.         h.h1.style.borderRadius = h.r1;
  35.         h.h1.style[TRANSFORM_NAME] = '';
  36.       });
  37.  
  38.       this.super(arguments);
  39.  
  40.       if (!scope._heroes.length) {
  41.         this.completed = true;
  42.       }
  43.     },
  44.  
  45.     prepare: function(scope, options) {
  46.       this.super(arguments);
  47.       var src = options.src, dst = options.dst;
  48.  
  49.       if (scope._heroes && scope._heroes.length) {
  50.         this.ensureComplete(scope);
  51.       } else {
  52.         scope._heroes = [];
  53.       }
  54.  
  55.       // FIXME(yvonne): basic support for nested pages.
  56.       // Look for heroes in the light DOM and one level of shadow DOM of the src and dst,
  57.       // and also in src.selectedItem or dst.selectedItem, then transform the dst hero to src
  58.       var ss = '[hero]';
  59.       var h$ = this.findAllInShadows(src, ss);
  60.       if (src.selectedItem) {
  61.         hs$ = this.findAllInShadows(src.selectedItem, ss);
  62.         hsa$ = [];
  63.         // De-duplicate items
  64.         Array.prototype.forEach.call(hs$, function(hs) {
  65.           if (h$.indexOf(hs) === -1) {
  66.             hsa$.push(hs);
  67.           }
  68.         })
  69.         h$ = h$.concat(hsa$);
  70.       }
  71.  
  72.       for (var i=0, h0; h0=h$[i]; i++) {
  73.         var v = h0.getAttribute('hero-id');
  74.         var ds = '[hero][hero-id="' + v + '"]';
  75.         var h1 = this.findInShadows(dst, ds);
  76.  
  77.         if (!h1 && dst.selectedItem) {
  78.           h1 = this.findInShadows(dst.selectedItem, ds);
  79.         }
  80.  
  81.         // console.log('src', src);
  82.         // console.log('dst', dst, dst.selectedItem);
  83.         // console.log(v, h0, h1);
  84.         if (v && h1) {
  85.           var c0 = getComputedStyle(h0);
  86.           var c1 = getComputedStyle(h1);
  87.           var h = {
  88.             h0: h0,
  89.             b0: h0.getBoundingClientRect(),
  90.             r0: c0.borderRadius,
  91.             h1: h1,
  92.             b1: h1.getBoundingClientRect(),
  93.             r1: c1.borderRadius
  94.           };
  95.  
  96.           var dl = h.b0.left - h.b1.left;
  97.           var dt = h.b0.top - h.b1.top;
  98.           var sw = h.b0.width / h.b1.width;
  99.           var sh = h.b0.height / h.b1.height;
  100.  
  101.           // h.scaley = h.h0.hasAttribute('scaley');
  102.           // if (!h.scaley && (sw !== 1 || sh !== 1)) {
  103.           //   sw = sh = 1;
  104.           //   h.h1.style.width = h.b0.width + 'px';
  105.           //   h.h1.style.height = h.b0.height + 'px';
  106.           // }
  107.  
  108.           // Also animate the border-radius for the circle-to-square transition
  109.           if (h.r0 !== h.r1) {
  110.             h.h1.style.borderRadius = h.r0;
  111.           }
  112.  
  113.           // console.log(h);
  114.  
  115.           h.h1.style[TRANSFORM_NAME] = 'translate(' + dl + 'px,' + dt + 'px)' + ' scale(' + sw + ',' + sh + ')';
  116.           h.h1.style[TRANSFORM_NAME + 'Origin'] = '0 0';
  117.  
  118.           scope._heroes.push(h);
  119.         }
  120.       }
  121.  
  122.     },
  123.  
  124.     // carefully look into ::shadow with polyfill specific hack
  125.     findInShadows: function(node, selector) {
  126.       return node.querySelector(selector) || (hasShadowDOMPolyfill ? 
  127.           queryAllShadows(node, selector) :
  128.           node.querySelector('::shadow ' + selector));
  129.     },
  130.  
  131.     findAllInShadows: function(node, selector) {
  132.       if (hasShadowDOMPolyfill) {
  133.         var nodes = node.querySelectorAll(selector).array();
  134.         var shadowNodes = queryAllShadows(node, selector, true);
  135.         return nodes.concat(shadowNodes);
  136.       } else {
  137.         return node.querySelectorAll(selector).array().concat(node.shadowRoot ? node.shadowRoot.querySelectorAll(selector).array() : []);
  138.       }
  139.     },
  140.  
  141.     ensureComplete: function(scope) {
  142.       this.super(arguments);
  143.       if (scope._heroes) {
  144.         scope._heroes.forEach(function(h) {
  145.           h.h1.style[TRANSITION_NAME] = '';
  146.           h.h1.style[TRANSFORM_NAME] = '';
  147.         });
  148.         scope._heroes = [];
  149.       }
  150.     },
  151.  
  152.     complete: function(scope, e) {
  153.       // if (e.propertyName === TRANSFORM_CSSNAME) {
  154.         var done = false;
  155.         scope._heroes.forEach(function(h) {
  156.           if (h.h1 === e.path[0]) {
  157.             done = true;
  158.           }
  159.         });
  160.  
  161.         if (done) {
  162.           this.super(arguments);
  163.         }
  164.       // }
  165.     }
  166.  
  167.   });
  168.  
  169.   
  170.   // utility method for searching through shadowRoots.
  171.   function queryShadow(node, selector) {
  172.     var m, el = node.firstElementChild;
  173.     var shadows, sr, i;
  174.     shadows = [];
  175.     sr = node.shadowRoot;
  176.     while(sr) {
  177.       shadows.push(sr);
  178.       sr = sr.olderShadowRoot;
  179.     }
  180.     for(i = shadows.length - 1; i >= 0; i--) {
  181.       m = shadows[i].querySelector(selector);
  182.       if (m) {
  183.         return m;
  184.       }
  185.     }
  186.     while(el) {
  187.       m = queryShadow(el, selector);
  188.       if (m) {
  189.         return m;
  190.       }
  191.       el = el.nextElementSibling;
  192.     }
  193.     return null;
  194.   }
  195.  
  196.   function _queryAllShadows(node, selector, results) {
  197.     var el = node.firstElementChild;
  198.     var temp, sr, shadows, i, j;
  199.     shadows = [];
  200.     sr = node.shadowRoot;
  201.     while(sr) {
  202.       shadows.push(sr);
  203.       sr = sr.olderShadowRoot;
  204.     }
  205.     for (i = shadows.length - 1; i >= 0; i--) {
  206.       temp = shadows[i].querySelectorAll(selector);
  207.       for(j = 0; j < temp.length; j++) {
  208.         results.push(temp[j]);
  209.       }
  210.     }
  211.     while (el) {
  212.       _queryAllShadows(el, selector, results);
  213.       el = el.nextElementSibling;
  214.     }
  215.     return results;
  216.   }
  217.  
  218.   queryAllShadows = function(node, selector, all) {
  219.     if (all) {
  220.       return _queryAllShadows(node, selector, []);
  221.     } else {
  222.       return queryShadow(node, selector);
  223.     }
  224.   };
  225.  
  226. })();
  227.